<template>
  <el-card class="live-card">
    <!-- <create-room /> -->
    <!-- <el-table :data="LiveInfo">
      <el-table-column label="最近开播" width="200">
        <template #default="scope">
          <div class="date">
            <div class="day">{{ formatDay(scope.row.start_time) }}</div>
            <div class="start-end">
              {{
                formatStartOrEndTime(scope.row.start_time, scope.row.end_time)
              }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="直播间信息">
        <template #default="scope">
          <div class="product-wrapper">
            <img class="product-cover" :src="scope.row.feeds_img" alt="" />
            <div class="product-right">
              <div class="product">{{ scope.row.name }}</div>
              <div class="room-id">房间号：{{ scope.row.roomid }}</div>
              <div class="anchor_name">主播：{{ scope.row.anchor_name }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="直播状态" width="180">
        <template #default="scope">
          {{ liveStatus[scope.row.live_status] }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text">控制台</el-button>
          <el-button
            type="text"
            :disabled="
              scope.row.live_status !== 101 ||
              scope.row.live_status !== 102 ||
              scope.row.live_status !== 103
            "
            >分享</el-button
          >
          <el-popover placement="top">
            <p style="padding: 10px 10px 0 10px">确认删除这个房间吗？</p>
            <div style="text-align: center; margin: 0; padding: 10px">
              <el-button
                type="primary"
                size="mini"
                @click="deleteRoom(scope.row)"
                >确定</el-button
              >
            </div>
            <el-button
              type="text"
              style="padding-left: 10px"
              :v-slot="reference"
              >删除</el-button
            >
          </el-popover>
        </template>
      </el-table-column>
    </el-table> -->
  </el-card>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import { getLiveInfo } from '@/service/main/main'
export default defineComponent({
  props: {
    ruoter: {
      type: String,
      default: '',
    },
  },
  async setup() {
    // const LiveInfo = ref('')
    // 1.请求数据
    // const getLiveRooms = () => {}
    const LiveInfoRes = await getLiveInfo(0, 10)
    const LiveInfo = LiveInfoRes.room_info
    // console.log(LiveInfo)
    const formatDay = computed((item: number) => {
      console.log(item)
      const date = new Date(item * 1000)
      const month = date.getMonth() + 1
      const day = date.getDate()
      return `${month}月${day}日`
    })

    // const formatDay = (item: number) => {
    //   console.log(item)

    //   const date = new Date(item * 1000)
    //   const month = date.getMonth() + 1
    //   const day = date.getDate()
    //   return `${month}月${day}日`
    // }

    return { LiveInfoRes, LiveInfo, formatDay }
  },
})
</script>

<style scoped lang="less">
.live-card {
  min-height: 80vh;

  .product-number {
    font-size: 14px;
    color: #999;
    margin-bottom: 0.2rem;
  }

  .el-table {
    .date {
      .day {
        font-size: 0.24rem;
        margin-bottom: 0.1rem;
      }
    }

    .el-button {
      margin-right: 10px;
    }

    .product-wrapper {
      display: flex;
      align-items: center;

      .product-cover {
        width: 1rem;
        height: 1rem;
        margin-right: 0.2rem;

        img {
          width: 100%;
          border-radius: 5px;
        }
      }

      .product-right {
        .product {
          font-size: 0.18rem;
          margin-bottom: 0.1rem;
        }

        .room-id,
        .anchor_name {
          font-size: 0.14rem;
          color: #888;
        }
      }
    }

    .cell {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}
</style>
